<template>
  <el-drawer
    v-model="visible"
    :title="getNodeTitle"
    size="500px"
    :before-close="handleClose"
  >
    <template v-if="nodeType === 'approval'">
      <el-form :model="nodeForm" label-width="100px">
        <el-form-item label="节点名称">
          <el-input v-model="nodeForm.name" placeholder="请输入节点名称" />
        </el-form-item>
        <el-form-item label="审批人">
          <el-select v-model="nodeForm.approver" style="width: 100%">
            <el-option label="直接主管" value="manager" />
            <el-option label="部门经理" value="director" />
            <el-option label="HR" value="hr" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批方式">
          <el-radio-group v-model="nodeForm.approvalType">
            <el-radio label="or">或签（一人同意即可）</el-radio>
            <el-radio label="and">会签（需全部同意）</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>

    <template v-else-if="nodeType === 'condition'">
      <el-form :model="nodeForm" label-width="100px">
        <el-form-item label="条件名称">
          <el-input v-model="nodeForm.name" placeholder="请输入条件名称" />
        </el-form-item>
        <el-form-item label="条件设置">
          <div class="condition-list">
            <div v-for="(cond, index) in nodeForm.conditions" :key="index" class="condition-item">
              <el-select v-model="cond.field" placeholder="选择字段">
                <el-option label="金额" value="amount" />
                <el-option label="天数" value="days" />
              </el-select>
              <el-select v-model="cond.operator" placeholder="选择条件">
                <el-option label="大于" value="gt" />
                <el-option label="小于" value="lt" />
                <el-option label="等于" value="eq" />
              </el-select>
              <el-input v-model="cond.value" placeholder="输入值" />
              <el-button type="danger" link @click="removeCondition(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <el-button type="primary" link @click="addCondition">
              <el-icon><Plus /></el-icon>添加条件
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </template>

    <template v-else-if="nodeType === 'notify'">
      <el-form :model="nodeForm" label-width="100px">
        <el-form-item label="节点名称">
          <el-input v-model="nodeForm.name" placeholder="请输入节点名称" />
        </el-form-item>
        <el-form-item label="通知方式">
          <el-checkbox-group v-model="nodeForm.notifyTypes">
            <el-checkbox label="email">邮件通知</el-checkbox>
            <el-checkbox label="sms">短信通知</el-checkbox>
            <el-checkbox label="wechat">微信通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="通知内容">
          <el-input
            v-model="nodeForm.notifyContent"
            type="textarea"
            :rows="4"
            placeholder="请输入通知内容"
          />
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const visible = ref(true)

const nodeType = computed(() => route.params.type)
const nodeId = computed(() => route.params.id)

const nodeForm = ref({
  name: '',
  approver: 'manager',
  approvalType: 'or',
  conditions: [],
  notifyTypes: [],
  notifyContent: ''
})

const getNodeTitle = computed(() => {
  const titles = {
    approval: '审批节点',
    condition: '条件节点',
    notify: '通知节点'
  }
  return titles[nodeType.value] || '节点编辑'
})

const addCondition = () => {
  nodeForm.value.conditions.push({
    field: '',
    operator: '',
    value: ''
  })
}

const removeCondition = (index) => {
  nodeForm.value.conditions.splice(index, 1)
}

const handleClose = () => {
  router.back()
}

const handleSave = () => {
  // 这里处理保存逻辑
  ElMessage.success('保存成功')
  router.back()
}

onMounted(() => {
  // 这里可以根据nodeId获取节点数据
})
</script>

<style scoped>
.condition-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.condition-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.condition-item .el-select {
  width: 120px;
}

.condition-item .el-input {
  width: 120px;
}
</style> 